<template>
    <view class="page">
        <view class="picture">
            <uv-image class="pic" :src="picture" mode="aspectFit" lazyLoad width="100%" height="100%"></uv-image>
        </view>
        <view class="controller">
            <view class="specs">
                <view class="title">高清修复放大至</view>
                <view class="item" v-for="(item, i) in specs" :key="i" @click="changeSpecs(i)">
                    <view class="selected" :class="{ actived: specs_index == i }"></view>
                    <view class="text">{{ item.name }}</view>
                </view>
            </view>
            <view class="denois">
                <view class="title">变化幅度</view>
                <view class="slider">
                    <slider :value="denoising_strength" @changing="changing" show-value step="0.01" min="0" max="1"
                        block-size="10" block-color="white" backgroundColor="#333" activeColor="#FFCB30" />
                </view>
            </view>
            <view class="work-btn-style btn" :class="{ disabled: user.integral < cost }" @click="submit">
                <text class="btn-text">点击生成</text>
                <text class="btn-price">（本次消耗{{ cost }}点积分）</text>
            </view>
        </view>

        <fab />
    </view>
</template>

<script setup>
import {
    onLoad
} from '@dcloudio/uni-app'

//api
import {
    apiGetUserInfo
} from '@/api/authApi.js'
import {
    apiGetCostCheck
} from '@/api/accountApi.js'
import {
    apiDenoise, apiUpscale
} from '@/api/defaultApi.js'

import { ref } from 'vue';

//pinia
import {
    storeToRefs
} from 'pinia'
import {
    useUserStore
} from "@/stores/useUserStore.js"

// 获取pinia的数据
const userStore = useUserStore()

// 从pinia的数据中结构出值并做响应式
const {
    user
} = storeToRefs(userStore)

//图片
const picture = ref('')
const id = ref('')
//规格
const specs = ref([
    { name: '2K高清', value: '2K' },
    { name: '4K高清', value: '4K' },
])
const specs_index = ref(0)
//变化幅度
const denoising_strength = ref(0)
// 图片索引
const img_index = ref(0)
// 消耗
const cost = ref(0)


onLoad((option) => {
    // #ifdef H5
    picture.value = option.img
    // #endif

    // #ifndef H5
    picture.value = option.img + '?x-oss-process=style/ct_nowatermark'
    //#endif

    id.value = option.id
    img_index.value = option.index

})


// 获取用户信息
const getUserInfo = async () => {
    let res = await apiGetUserInfo()
    userStore.setUser(res.data)
}

// 查询费用
const getCostCheck = async () => {
    let res = await apiGetCostCheck({
        kind: 2,
        mode: specs.value[specs_index.value].value
    })

    cost.value = res.data
}

// 切换规格
const changeSpecs = (index) => {
    specs_index.value = index
    getCostCheck()
}
//云图高清放大-变化幅度
const getDenoise = async () => {
    let res = await apiDenoise()
    denoising_strength.value = res.data
}

// 修改变化幅度
const changing = (e) => {
    denoising_strength.value = e.detail.value
}


//点击生成
const submit = async () => {

    // 判断积分是否足够
    // if (user.value.integral < cost.value) {
    //     uni.showToast({
    //         title: '积分不足',
    //         icon: 'none'
    //     })
    //     return
    // }

    //生成高清修复任务
    let res = await apiUpscale({
        mode: specs_index.value,
        img_index: img_index.value,
        denoising_strength:
            denoising_strength.value,
        reqid: id.value
    })

    // 重新获取个人信息（更新个人钱包）
    getUserInfo()

    uni.navigateTo({
        url: '/pages/highDefinitionInfo/highDefinitionInfo?id=' + res.data + '&img=' + picture.value
        // url: '/pages/highDefinitionInfo/highDefinitionInfo?id='
    })

}


// 获取默认变化幅度   查询默认放大规格的价格    
// 切换放大规格的时候重新查询费用   点击确定的时候根据选择的规格提交不同的接口


//查询当前选项去价格
getCostCheck()
// 查询默认放大规格的价格
getDenoise()
</script>

<style lang="scss" scoped>
.picture {
    width: 100%;
    height: 686rpx;
    margin-top: 32rpx;
    background: #191919;
    border-radius: 20rpx;

    .pic {
        width: 100%;
        height: 100%;
    }
}

.controller {
    height: 214rpx;
    width: 100%;
    background: #000;
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    padding: 0 32rpx;
    box-sizing: border-box;

    .specs {
        width: 100%;
        height: 32rpx;
        display: flex;
        margin-bottom: 16rpx;
        align-items: center;

        .title {
            font-size: 24rpx;
            color: #fff;
            font-weight: 400;
        }

        .item {
            margin-left: 80rpx;
            display: flex;

            .selected {
                width: 32rpx;
                height: 32rpx;
                background: #191919;
                border: 2rpx solid #4d4d4d;
                border-radius: 50%;
                position: relative;
                box-sizing: border-box;

                &.actived {
                    &::after {
                        width: 16rpx;
                        height: 16rpx;
                        background: #ffcb30;
                        content: '';
                        position: absolute;
                        border-radius: 50%;
                        top: 7rpx;
                        left: 6rpx;
                    }
                }
            }

            .text {
                font-size: 22rpx;
                color: #E6E6E6;
                font-weight: 400;
                margin-left: 7rpx;
            }
        }
    }

    .denois {
        width: 100%;
        height: 48rpx;
        display: flex;
        margin-bottom: 24rpx;
        align-items: center;

        .title {
            font-size: 24rpx;
            color: #fff;
            font-weight: 400;
        }

        .slider {
            flex: 1;
            height: 100%;
            margin-left: 40rpx;

            &:deep(uni-slider) {
                margin: 0;

                .uni-slider-tap-area {
                    padding: 0;

                    .uni-slider-handle-wrapper {
                        height: 8rpx;
                    }
                }

                .uni-slider-value {
                    margin-left: 40rpx;
                    width: 88rpx;
                    height: 48rpx;
                    background: #191919;
                    border: 1rpx solid #4d4d4d;
                    border-radius: 15rpx;
                    color: #666;
                    font-size: 22rpx;
                    font-weight: 400;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }

    .btn {
        width: 100%;
        height: 78rpx;
        border-radius: 39rpx;
        color: #080808;
        align-items: flex-end;

        .btn-text {
            font-size: 30rpx;
            font-weight: 700;
            line-height: 78rpx;
        }

        .btn-price {
            font-weight: 500;
            font-size: 18rpx;
            line-height: 60rpx;
            letter-spacing: 2.8rpx;
        }
    }
}
</style>
